<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <pre>
        v-for指令作用是：根据数据生成列表结构
        数组经常和v-for结合使用
        语法是(item,index) in 数据
        item 和 index 可以结合其他指令一起使用
        数组长度的更新会同步到页面上，是响应式的

    </pre>
    <div id="app">

        <ul>
            <li v-for="item in nameArr">他们是:{{item}}</li>
        </ul>
        <h2 v-for="it in foods">{{it}}</h2>
        <input type="button" value="添加" @click="add">
        <input type="button" value="删除" @click="remove">

    </div>
</body>
<script src="../vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            nameArr: ["魔法少女郭德纲", "精神之子", "奥利给给"],
            foods: ['QQ', 'tomato', 'apple', 'orange']
        },
        methods: {
            add: function () {
                this.foods.push('汉宝宝');
            },
            remove: function () {
                this.foods.shift();
            }
        }
    })
    console.log(app);
</script>

</html>